<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :requestApi="getOriginList" :pagination="false">
      <template #tableHeader>
        <el-button type="primary" @click="opera(undefined)">创建端口</el-button>
      </template>
      <template #is_as_app="{ row }">
        <el-tag type="success" v-show="row.is_as_app">是</el-tag>
        <el-tag type="danger" v-show="!row.is_as_app">否</el-tag>
      </template>
      <template #opera="{ row }">
        <el-button link :icon="Edit" type="primary" @click="opera(row)">编辑</el-button>
        <el-button link :icon="Delete" type="primary" @click="deleteApi([row.id])">删除</el-button>
      </template>
    </ProTable>
    <el-dialog title="端口" v-model="visible">
      <el-form label-width="140" :model="diaForm" :rules="rules" ref="formRef">
        <el-form-item label="端口名称">
          <el-input v-model="diaForm!.name"></el-input>
        </el-form-item>
        <el-form-item label="是否作为展示端口">
          <el-switch
            v-model="diaForm.is_as_app"
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Edit, Delete } from "@element-plus/icons-vue";
import { getOriginList, createOrigin, editOrigin, deleteOrigin } from "@/api/modules/countrySetting";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";

interface rowProps {
  id?: number;
  name: string;
  is_as_app?: boolean;
}

const diaForm = ref<rowProps>({ name: "" });

const visible = ref(false);

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { prop: "name", label: "端口名称" },
  { prop: "is_as_app", label: "是否作为展示端口" },
  { prop: "opera", label: "操作" }
];

const rules: FormRules = {
  name: [{ required: true, message: "端口名称不可缺少", trigger: "blur" }]
};

const nowOpera = ref<"edit" | "create">();

const opera = (row: any) => {
  visible.value = true;
  const params: any = {
    name: ""
  };

  diaForm.value = row ? row : params;
  row ? (nowOpera.value = "edit") : (nowOpera.value = "create");
};
const formRef = ref<FormInstance>();
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      try {
        if (nowOpera.value == "create") {
          await createOrigin(diaForm.value);
        } else {
          await editOrigin(diaForm.value);
        }
        ElMessage.success("成功");
        await proRef.value?.getTableList();
        visible.value = false;
      } catch (error) {}
    }
  });
};

const deleteApi = async (ids: any) => {
  try {
    await useHandleData(deleteOrigin, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
